<template>
  <view class="address-management-page">
    <!-- 顶部导航栏 -->
    <view class="custom-nav-bar">
      <view class="nav-left" @click="navBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">地址管理</view>
      <view class="nav-right" @click="gotoAddAddress">
        <text class="add-icon">+</text>
      </view>
    </view>

    <!-- 地址列表 -->
    <view class="address-list" v-if="addresses.length > 0">
      <view 
        class="address-item" 
        v-for="(address, index) in addresses" 
        :key="address.id"
        @click="onAddressClick(address)"
      >
        <view class="address-header">
          <view class="address-name">{{ address.name }}</view>
          <view class="address-phone">{{ address.phone }}</view>
          <view class="default-tag" v-if="address.isDefault">默认</view>
        </view>
        
        <view class="address-body">
          <view class="address-detail">
            <text class="address-region">{{ address.province }} {{ address.city }} {{ address.district }} </text>
            <text class="address-street">{{ address.street }}</text>
          </view>
        </view>
        
        <view class="address-actions">
          <view class="action-btn edit-btn" @click.stop="gotoEditAddress(address)">编辑</view>
          <view class="action-btn delete-btn" @click.stop="showDeleteConfirm(address.id)">删除</view>
          <view 
            class="action-btn default-btn" 
            @click.stop="setDefaultAddress(address.id)"
            v-if="!address.isDefault"
          >
            设为默认
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空地址状态 -->
    <view class="empty-address" v-if="addresses.length === 0">
      <view class="empty-icon">📌</view>
      <view class="empty-text">暂无收货地址</view>
      <view class="empty-subtext">添加您的常用地址，方便快捷下单</view>
      <button class="add-address-btn" @click="gotoAddAddress">
        添加收货地址
      </button>
    </view>

    <!-- 删除确认弹窗 -->
    <u-popup 
      :show="deletePopup" 
      mode="center"
	  @close="deletePopup = false"
    >
      <view class="delete-dialog">
        <view class="dialog-title">确认删除</view>
        <view class="dialog-content">
          您确定要删除该地址吗？删除后将无法恢复。
        </view>
        <view class="dialog-actions">
          <button class="cancel-btn" @click="closeDeleteConfirm">取消</button>
          <button class="confirm-btn" @click="confirmDelete">确认删除</button>
        </view>
      </view>
    </u-popup>

    <!-- 操作提示 -->
    <uni-toast ref="toast" />
  </view>
</template>

<script>

export default {

  data() {
    return {
      // 地址列表
      addresses: [],
      // 当前要删除的地址ID
      deleteAddressId: null
    };
  },
  
  onShow() {
    // 每次页面显示时加载最新地址列表
    this.loadAddresses();
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    
    // 加载地址列表
    loadAddresses() {
      // 模拟从本地存储获取地址数据
      const storedAddresses = uni.getStorageSync('userAddresses') || [];
      this.addresses = storedAddresses;
    },
    
    // 点击地址项（如果是从选择地址页面进入，可返回选择结果）
    onAddressClick(address) {
      // 判断是否是从选择地址页面进入
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      
      // 如果上一页是需要选择地址的页面（如结算页），则返回选择结果
      if (prevPage && prevPage.route.includes('checkout')) {
        uni.navigateBack({
          delta: 1,
          success: () => {
            prevPage.selectAddress(address);
          }
        });
      }
    },
    
    // 前往添加地址页面
    gotoAddAddress() {
      uni.navigateTo({
        url: '/pages/mine/address-edit'
      });
    },
    
    // 前往编辑地址页面
    gotoEditAddress(address) {
      uni.navigateTo({
        url: `/pages/mine/address-edit?id=${address.id}`
      });
    },
    
    // 显示删除确认弹窗
    showDeleteConfirm(addressId) {
      this.deleteAddressId = addressId;
      this.deletePopup = true
    },
    
    // 关闭删除确认弹窗
    closeDeleteConfirm() {
      this.deletePopup = false;
    },
    
    // 确认删除地址
    confirmDelete() {
      if (!this.deleteAddressId) return;
      
      // 过滤掉要删除的地址
      this.addresses = this.addresses.filter(item => item.id !== this.deleteAddressId);
      
      // 保存到本地存储
      uni.setStorageSync('userAddresses', this.addresses);
      
      // 关闭弹窗并提示
      this.deletePopup = false;
     
	  uni.showToast({
	  	icon:'none',
		title:'地址已删除'
	  })
    },
    
    // 设置默认地址
    setDefaultAddress(addressId) {
      // 先将所有地址的默认状态设为false
      this.addresses.forEach(item => {
        item.isDefault = false;
      });
      
      // 将选中的地址设为默认
      const targetAddress = this.addresses.find(item => item.id === addressId);
      if (targetAddress) {
        targetAddress.isDefault = true;
      }
      
      // 保存到本地存储
      uni.setStorageSync('userAddresses', this.addresses);
      
      // 提示
      this.$refs.toast.show({
        title: '已设为默认地址',
        duration: 2000
      });
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary-color: #165DFF;
$primary-light: #E8F3FF;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$background: #F5F7FA;
$card-bg: #FFFFFF;
$border-color: #E5E6EB;
$danger-color: #F5222D;

.address-management-page {
  background-color: $background;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-top: var(--status-bar-height);
}

// 自定义导航栏
.custom-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card-bg;
  border-bottom: 1px solid $border-color;
  
  .nav-left, .nav-right {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .back-icon {
    font-size: 45rpx;
    color: $text-primary;
  }
  
  .add-icon {
    width: 40rpx;
    height: 40rpx;
    background-color: $primary-color;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: bold;
  }
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
}

// 地址列表
.address-list {
  padding: 20rpx;
  
  .address-item {
    background-color: $card-bg;
    border-radius: 16rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    position: relative;
    
    .address-header {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .address-name {
        font-size: 28rpx;
        color: $text-primary;
        font-weight: 500;
        margin-right: 20rpx;
      }
      
      .address-phone {
        font-size: 26rpx;
        color: $text-secondary;
        flex: 1;
      }
      
      .default-tag {
        font-size: 22rpx;
        color: $primary-color;
        background-color: $primary-light;
        padding: 3rpx 12rpx;
        border-radius: 12rpx;
      }
    }
    
    .address-body {
      margin-bottom: 20rpx;
      
      .address-detail {
        font-size: 26rpx;
        color: $text-secondary;
        line-height: 1.5;
        
        .address-region {
          color: $text-secondary;
        }
        
        .address-street {
          color: $text-primary;
        }
      }
    }
    
    .address-actions {
      display: flex;
      justify-content: flex-end;
      gap: 25rpx;
      padding-top: 15rpx;
      border-top: 1px dashed $border-color;
      
      .action-btn {
        font-size: 24rpx;
        padding: 5rpx 0;
      }
      
      .edit-btn {
        color: $text-secondary;
      }
      
      .delete-btn {
        color: $danger-color;
      }
      
      .default-btn {
        color: $primary-color;
      }
    }
  }
}

// 空地址状态
.empty-address {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 150rpx;
  
  .empty-icon {
    font-size: 100rpx;
    color: $text-tertiary;
    margin-bottom: 40rpx;
    opacity: 0.6;
  }
  
  .empty-text {
    font-size: 30rpx;
    color: $text-secondary;
    margin-bottom: 15rpx;
    font-weight: 500;
  }
  
  .empty-subtext {
    font-size: 24rpx;
    color: $text-tertiary;
    margin-bottom: 50rpx;
  }
  
  .add-address-btn {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: $primary-color;
    color: #fff;
    border: none;
    border-radius: 40rpx;
    font-size: 28rpx;
    box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.25);
  }
}

// 删除确认弹窗
.delete-dialog {
  width: 540rpx;
  background-color: $card-bg;
  border-radius: 20rpx;
  padding: 35rpx;
  
  .dialog-title {
    font-size: 30rpx;
    font-weight: 600;
    color: $text-primary;
    text-align: center;
    margin-bottom: 25rpx;
  }
  
  .dialog-content {
    font-size: 26rpx;
    color: $text-secondary;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 35rpx;
    padding: 0 10rpx;
  }
  
  .dialog-actions {
    display: flex;
    gap: 20rpx;
    
    .cancel-btn, .confirm-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      font-weight: 500;
    }
    
    .cancel-btn {
      background-color: $background;
      color: $text-primary;
      border: 1px solid $border-color;
    }
    
    .confirm-btn {
      background-color: $danger-color;
      color: #fff;
      border: none;
    }
  }
}
</style>
    